<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>我的博客</title>
	</head>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		main {
			width: 1200px;
			height: 600px;
			margin: 60px auto;
		}
		.zuo {
			position: relative;
			width: 550px;
			height: 600px;
			float: left;
			flex: 1;
			flex-basis: 300px;
			flex-grow: 0;
			box-shadow: 0px 4px 7px rgba(0, 0, 0, .5);
			cursor: pointer;
			transition: all .5s cubic-bezier(.8, .5, .2, 1.4);
			overflow: hidden;
			position: relative;
		}
		.zuo img {
			width: 100%;
			height: 100%;
			transition: all .5s cubic-bezier(.8, .5, .2, 1.4);
		}
		.descriptions {
			position: absolute;
			top: 0px;
			left: 0px;
			background-color: rgba(255, 255, 255, .7);
			width: 100%;
			height: 100%;
			transition: all .7s ease-in-out;
			padding: 20px;
			box-sizing: border-box;
			clip-path: circle(0% at 100% 100%);
		}
		.zuo:hover .descriptions {
			left: 0px;
			transition: all .7s ease-in-out;
			clip-path: circle(75%);
		}
		.zuo:hover {
			transition: all .5s cubic-bezier(.8, .5, .2, 1.4);
			box-shadow: 0px 2px 3px rgba(0, 0, 0, .3);
			transform: scale(.97);
		}
		.zuo:hover img {
			transition: all .5s cubic-bezier(.8, .5, .2, 1.4);
			transform: scale(1.6) rotate(20deg);
			filter: blur(3px);
		}
		.zuo h1 {
			color: black;
			letter-spacing: 1px;
			margin: 0px;
		}
		.zuo p {
			line-height: 24px;
			font-size: 24px;
			height: 70%;
		}
		.zuo button {
			width: 150px;
			height: 40px;
			cursor: pointer;
			border-style: none;
			line-height: 40px;
			background-color: #ff3838;
			color: #fff;
			font-size: 24px;
			outline: none;
			box-shadow: 0px 2px 3px rgba(0, 0, 0, .4);
			transition: all .5s ease-in-out;
			border-radius: 50px;
		}
		.zuo button:hover {
			transform: scale(.95) translateX(-5px);
			transition: .5s;
		}
		.you {
			width: 550px;
			height: 600px;
			float: right;
			overflow: hidden;
			flex: 1;
			flex-basis: 300px;
			flex-grow: 0;
			box-shadow: 0px 4px 7px rgba(0, 0, 0, .5);
			cursor: pointer;
			transition: all .5s cubic-bezier(.8, .5, .2, 1.4);
			overflow: hidden;
			position: relative;
		}
		.you:hover .descriptions {
			left: 0px;
			transition: all .7s ease-in-out;
			clip-path: circle(75%);
		}
		.you:hover {
			transition: all .5s cubic-bezier(.8, .5, .2, 1.4);
			box-shadow: 0px 2px 3px rgba(0, 0, 0, .3);
			transform: scale(.97);
			cursor: move
		}
		.you:hover img {
			transition: all .5s cubic-bezier(.8, .5, .2, 1.4);
			transform: scale(1.6) rotate(20deg);
			filter: blur(3px); -moz-animation: ;
			overflow: hidden;
		}
		.you h1 {
			color: black;
			letter-spacing: 1px;
			margin: 0px;
		}
		.you p {
			line-height: 24px;
			height: 70%;
			font-size: 24px;
		}
		.you button {
			width: 150px;
			height: 40px;
			cursor: pointer;
			border-style: none;
			line-height: 40px;
			background-color: #ff3838;
			color: #fff;
			font-size: 24px;
			outline: none;
			box-shadow: 0px 2px 3px rgba(0, 0, 0, .4);
			transition: all .5s ease-in-out;
			border-radius: 50px;
		}
		.you button:hover {
			transform: scale(.95) translateX(-5px);
			transition: all .5s ease-in-out;
		}
		.zhong {
			width: 98px;
			height: 596px;
			text-align: center;
			float: left;
			font-size: 36px;
			line-height: 100px;
			font-weight: 700;
			color: white;
		}
		body {
			background-image: url(img/true.jpg);
			background-repeat: no-repeat;
			background-size: 100%;
			background-attachment: fixed;
		}
		footer {
			width: 1200px;
			height: 600px;
			margin: 60px auto;
		}
		.foot_zuo {
			width: 595px;
			height: 596px;
			float: left;
			border-right: 3px dashed #616161;
		}
		.foot_you {
			width: 595px;
			height: 596px;
			float: left;
		}
		h2 {
			width: 565px;
			font-size: 36px;
			text-align: center;
			padding-top: 20px;
		}
		h1 {
			font-size: 36px;
			text-align: center;
			letter-spacing: 16px;
		}
		.foot_y {
			width: 595px;
			height: 150px;
			margin-top: 11px;
		}
		.wa {
			width: 410px;
			float: right;
			font-size: 20px;
			text-align: center;
			padding-top: 60px;
		}
		.foot_you h1 {
			font-size: 36px;
			text-align: center;
			letter-spacing: 16px;
			padding-top: 65px;
			margin-left: 50px;
			\
		}
		.you_box {
			width: 545px;
			height: 453px;
			margin-left: 50px;
		}
		.you_box p {
			margin-top: 25px;
		}
		.you_box p span {
			font-size: 18px;
			padding-top: 15px;
		}
		.ipt {
			width: 300px;
			height: 30px;
		}
		.rq {
			width: 264px;
			height: 30px;
		}
		.xxx {
			width: 545px;
			height: 160px;
			margin: 0 auto;
		}
		.but {
			width: 100px;
			height: 30px;
			background: #93b518;
			margin-top: 60px;
			margin-left: 75px;
			border-radius: 3px;
			font-size: 18px;
			font-family: "微软雅黑";
			color: #fff;
		}
		.dibu{
			width: 100%;
			height: 70px;
			background-color: #2b2b2b;
			border-top: solid 5px #000;
		}
		.boke{
			padding-left: 400px;
			line-height: 60px;
			font-size: 20px;
			color: white;
		}
		.banquan{
			padding-left: 160px;
			color: #828282;
		}
	</style>
	<link rel="stylesheet" type="text/css" href="css/index.css" />
	<body>
		<!-- 头部 -->
		<header>
			<div class="container">
				<div class="timeline">
					<div class="swiper-container">
						<div class="swiper-wrapper">
							<div class="swiper-slide" style="background-image: url(img/120.jpg);" data-year="姓名">
								<div class="swiper-slide-content"><span class="timeline-year">姓名</span>
									<h4 class="timeline-title">王海涛</h4>
								</div>
							</div>
							<div class="swiper-slide" style="background-image: url(img/2.jpg);" data-year="来自">
								<div class="swiper-slide-content"><span class="timeline-year">来自</span>
									<h4 class="timeline-title">东光</h4>
								</div>
							</div>
							<div class="swiper-slide" style="background-image: url(img/3.jpg);" data-year="爱好">
								<div class="swiper-slide-content"><span class="timeline-year">爱好</span>
									<h4 class="timeline-title">打篮球</h4>
								</div>
							</div>
							<div class="swiper-slide" style="background-image: url(img/4.jpg);" data-year="书籍">
								<div class="swiper-slide-content"><span class="timeline-year">书籍</span>
									<h4 class="timeline-title">《活着》</h4>
								</div>
							</div>
							<div class="swiper-slide" style="background-image: url(img/5.jpg);" data-year="文案">
								<div class="swiper-slide-content"><span class="timeline-year">文案</span>
									<h4 class="timeline-title">
										<p>所有你乐于挥霍的时间都不能算作浪费。</p>
									</h4>
								</div>
							</div>
							<div class="swiper-slide" style="background-image: url(img/6.jpg);" data-year="关于我">
								<div class="swiper-slide-content"><span class="timeline-year">关于我</span>
									<h4 class="timeline-title">qq:2992384799</h4>
								</div>
							</div>
						</div>
						<div class="swiper-button-prev"></div>
						<div class="swiper-button-next"></div>
						<div class="swiper-pagination"></div>
					</div>
				</div>
			</div>
			<script src='js/swiper.min.js'></script>
			<script src="js/script.js"></script>
		</header>
		<!-- 内容 -->
		<main>
			<div class="zuo">
				<img src="img/heimao.jpg" style="width: 546px;height: 596px;">
				<div class="descriptions">
					<h1>《黑猫警长》</h1>
					<p>中国原创动画的一个难忘的经典角色之一，曾获全国第一届优秀儿童文学奖，
						后被改编为动画片剧本并播出，成为家喻户晓的卡通形象，被称为"中国动画史上最酷的警长"。
						黑猫警长一直受到广大观众，尤其是少年儿童们的喜爱，黑猫警长的机智、正义、勇敢、
						帅气成为20世纪八九十年代少儿的美好记忆。该角色已经衍生改篇成电影、真人版等。
					</p>
					<button>查看更多>></button>
				</div>
			</div>
			<span class="zhong">
				我<br>的<br>童<br>年<br>动<br>漫
			</span>
			<div class="you">
				<img src="img/250.jpg" style="width: 546px;height: 596px;">
				<div class="descriptions">
					<h1>《超兽武装》</h1>
					<p>十万年前的一场圣战，让冥王和雪皇相继被封印，七大宇宙迎来了十万年的平静。
						十万年后的今天，冥王将在七天后苏醒，届时，七大宇宙又将迎来一场末日浩劫。
						为了阻止这场浩劫，五位满怀信念的超兽战士义无反顾的踏上剿灭冥王之路。
						可惜，当他们要出手毁灭冥王的一刻，也正是冥王苏醒的一刻。
					</p>
					<button>查看更多>></button>
				</div>
			</div>
		</main>
		<!-- 尾部 -->
		<footer>
			<!-- 右中固定定位 -->
			<dt></dt>
			<dd>
				<script src=""></script>
			</dd>
			<dt></dt>
			<dd>
				<div class="foot_zuo">
					<h2>wen &nbsp;an</h2>
					<h1>文&nbsp;案</h1>
					<div class="foot_y">
						<img src="img/7.png" style="width: 180px;height: 147px;float: left;">
						<div class="wa">文案：关于梦想-清谈可以饱，梦想皆无由</div>
					</div>
					<div class="foot_y">
						<img src="img/8.png" style="width: 180px;height: 147px;float: left;">
						<div class="wa">文案：520官宣文案-你与星光，同样浪漫</div>
					</div>
					<div class="foot_y">
						<img src="img/9.jpg" style="width: 180px;height: 147px;float: left;">
						<div class="wa">文案：小孩子才分对错，成年人只看利弊</div>
					</div>
				</div>
				<div class="foot_you">
					<h1>请留下你的联系方式</h1>
					<form action="" method="">
					<div class="you_box">
						<p>
							<span>姓名：</span>
							<input type="text" class="ipt" pattern="^[\u4e00-\u9fa5]{0,}$" placeholder="例如：王潇" required autofocus>
							<span>（只能输入汉字）</span>
						</p>
						<p>
							<span>年龄：</span>
							<input type="number" class="ipt" value="18" min="15" max="120" />
							<span>（必须填写）</span>
						</p>
						<p>
							<span>电话：</span>
							<input type="tel" class="ipt" pattern="^\d{11}$" required />
							<span>（必须填写）</span>
						</p>
						<p>
							<span>邮箱：</span>
							<input type="email" class="ipt" value="" placeholder="123456@126.com" required multiple />
							<span>（必须填写）</span>
						</p>
						<p>
							<span>填写日期：</span>
							<input type="date" class="rq" value="1990-10-1" required />
							<span>（必须填写）</span>
						</p>
						<p class="xxx">
							<input type="submit" class="but" value="提交" />
							<input type="reset" class="but" value="重置" />
						</p>
					</div>
					</form>
				</div>
		</footer>
		<div class="dibu">
			<span class="boke">我的博客</span>
			<span class="banquan">© 2001 - 2021 CSDN 版权所有 </span>
		</div>
		<script src="./js/kefu.js"></script>
		<script type="text/javascript">
			var kefu = new Kefu({
				index: "javascript:window.scrollTo(0,0)",
				tel: "17736984895", //电话号码
				qq: "2992384799", //在线QQ
				wechatPerson: {
					state: true, // true是开启个人微信二维码, false不开启
					imgURL: "./img/me.jpg"
				},
				wechatofficial: {
					state: true, // true是开启微信公众号二维码, false不开启
					imgURL: "./img/xx.jpg"
				} //微信公众号
			});
		</script>
	</body>
</html>